<template>
  <div>
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside width="200px">
        <el-tree :data="carList" node-key="value" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-aside>
      <el-container>
        <el-main>
          <TopFilter ref="from" :list="topFilterList" :cols="3" @filterChange="changeHandle"></TopFilter>

          <FilterTable
            ref="table"
            :pageSize="5"
            :pageSizesArray="[5, 10, 20, 30, 50]"
            :height="'auto'"
            :columns="columns"
            :fetchapi="fetchApi"
            :params="fetchParams"
            :datakey="'records'"
            :onRowSelectChange="selectChangeHandle"
            :onColumnsChange="(columns) => (this.columns = columns)"
          >
          </FilterTable>
          <div
            :style="{
              position: 'absolute',
              left: 0,
              bottom: 0,
              right: 0,
              zIndex: 9,
              borderTop: '1px solid #e9e9e9',
              padding: '10px 20px',
              background: '#fff',
              textAlign: 'right',
            }"
          >
            <el-button @click="closeDrawer(1)">取 消</el-button>
            <el-button @click="closeDrawer(2)" type="primary" :disabled="isDisabled">确 定</el-button>
          </div>

          <!-- <FormPanel ref="from" :list="formList" :data="dealerInfo" @formChange="changeHandle" :isSubmitBtn="false" :collapse="false" :labelWidth="190"></FormPanel> -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { queryCarListSideC, getProductBrandTree, listColor, queryAllOption, queryAllPackage } from '@/api/dealerSaleP/OrderManagement/OrderSubmission/index.js';
import { dictionary } from '@/utils/dictMixin';
export default {
  data() {
    return {
      // formList: this.createdFromList(),
      topFilterList: this.createdFrom(),
      columns: this.createdTable(),
      fetchApi: queryCarListSideC,
      fetchParams: {
        dealerCode: this.orderData.dealerCode
        /// todo 订单细分类型
      },
      selectList: [],
      isDisabled: true,
      carList: [],
      defaultProps: {
        children: 'child',
        label: 'label',
      },
      dealerInfo: {},
      addressDTO: [],
      accountTypeList: [],
    };
  },
  mixins: [dictionary],
  props: ['orderData'],
  created() {
    this.getvehicleList();
    this.getListColor();
    this.getAllOption();
    this.getAllPackage();
  },
  methods: {

    initCityLink(value) {
      this.formList[4].initialValue = '';
      this.formList[5].initialValue = '';
      this.formList[6].initialValue = '';
      for (let i in this.addressDTO) {
        if (this.addressDTO[i].addressId === value) {
          // console.log(this.addressDTO[i]);
          this.formList[4].initialValue = this.addressDTO[i].cityId;
          this.formList[5].initialValue = this.addressDTO[i].linkMan;
          this.formList[6].initialValue = this.addressDTO[i].linkPhone;
          return;
        }
      }
    },
    handleNodeClick(val) {
      console.log('value================>' + val.type, val.value);
    },
    async getAllOption() {
      const res = await queryAllOption();
      if (res.resultCode === 200) {
        res.data.map((x) => {
          this.topFilterList.find((item) => item.fieldName === 'optionId').itemList.push({ text: x.optionName, value: x.optionId });
        });
      }
    },
    async getAllPackage() {
      const res = await queryAllPackage();
      if (res.resultCode === 200) {
        res.data.map((x) => {
          this.topFilterList.find((item) => item.fieldName === 'packageId').itemList.push({ text: x.configName, value: x.packageId });
        });
      }
    },
    async getListColor() {
      const res = await listColor();
      if (res.resultCode === 200) {
        let a = res.data;
        a.map((x) => {
          this.topFilterList.find((item) => item.fieldName === 'trimColorId').itemList.push({ text: x.colorName, value: x.colorId });
        });
        this.topFilterList[4].itemList = this.topFilterList.find((item) => item.fieldName === 'trimColorId').itemList;
      }
    },
    async getvehicleList() {
      let res = await getProductBrandTree();
      this.carList = res.data;
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, this.fetchParams, val);
    },
    closeDrawer(type) {
      if (type == 1) {
        this.$emit('close');
      } else {
        let json = this.selectList;
        this.isOpen = true;
        this.$emit('close', json, this.orderData);
      }
    },
    selectChangeHandle(rows) {
      if (rows.length > 0) {
        this.selectList = rows;
        this.isDisabled = false;
        return;
      }
      this.isDisabled = true;
    },

    createdFrom() {
      return [
        {
          type: 'INPUT',
          label: '物料编码',
          fieldName: 'productCode',
          placeholder: '请输入',
        },
        {
          type: 'SELECT',
          label: '配置',
          fieldName: 'packageId',
          placeholder: '请选择',
          itemList: [],
        },
        {
          type: 'SELECT',
          label: '选装',
          fieldName: 'optionId',
          placeholder: '请选择',
          itemList: [],
        },
        {
          type: 'SELECT',
          label: '内饰',
          fieldName: 'trimColorId',
          placeholder: '请选择',
          itemList: [],
        },
        {
          type: 'SELECT',
          label: '外饰',
          fieldName: 'colorId',
          placeholder: '请选择',
          itemList: [],
        },
      ];
    },
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },
        {
          title: '物料编码',
          dataIndex: 'productCode',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '物料描述',
          dataIndex: 'productName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },

        {
          title: '车型',
          dataIndex: 'modelName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '车系',
          dataIndex: 'seriesName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '配置',
          dataIndex: 'configName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '选装',
          dataIndex: 'optionName',
          align: 'center',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '内饰',
          dataIndex: 'trimColor',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '外饰',
          dataIndex: 'colorName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '市场指导价',
          dataIndex: 'oemDirectivePrice',
          hidden: true,
        },

      ];
    },
  },
};
</script>
